<template>
  <div>
    <h1>Hello 组合式API</h1>
    <!-- defineProps函数传的选项（组件的对外属性），在这里可以使用 -->
    <!-- <hello-world title="ScriptSetup"></hello-world> -->

    <!-- 绑定属性值 -->
    <button type="button" @click="isShow = !isShow ">显示/隐藏组件</button>
    <hello-world :title="myTitle " v-if="isShow"></hello-world>

  </div>
</template>

<script setup>

// 这里引入了组件。就可以直接在 template 模板里使用了。
import HelloWorld from './components/HelloWorld.vue';

import { ref } from 'vue'

const myTitle = ref("我是APP标题")

// 定义属性 表示显示隐藏组件
const isShow = ref(true);

setTimeout(()=>{

  myTitle.value = "我是APP的新标题"

}, 2000)
</script>
<!-- 
  <script>
  export default {
      // 属性
      data(){
        return {
          name: "张三",
        }
      },

      // 方法
      methods:{

      }
  }

</script> -->


<style lang="scss">
// 可以通过 <style lang="scss">（或其他预处理器）自动开启 
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.r {
  color: red;
}
.g {
  color: green;
}
.y {
  color: yellow;
}
.bg {
  background-color: wheat;
}
</style>
